在昨天我們在 React 的專案中改寫了App.js，並成功在網頁上印出 Hello, World

function App() {
  return (
    <div>
      <h1>Hello, World</h1>
    </div>
  );
}

export default App;

但是看這裡大家又會有疑問了
為什麼可以在 JavaScript 的檔案中，寫 HTML 的標籤？

JSX 定義

其實 JSX 是一個 JavaScript 的語法擴充，而且是 React 官方推薦使用的語法。

JSX 語法的重點在於允許我們在 JavaScript 的檔案中使用 HTML 的標籤，並使用 JSX 語法建立的是「一個 React 的 element」

而且 JSX 允許你使用 JavaScript 所有的功能。

這樣好像還是有點似懂非懂，那就再讓我們改寫一次 APP.js 這個檔案

function App() {
  const hi = <h1>Hello, World</h1> 
  return (
    <div>
      {hi}
    </div>
  );
}

export default App;

為什麼 hi 這個變數，被大括號包住了？

在 JSX 引用變數時，必須加上 { }
這樣看起來是不是很像在寫 JavaScript，變數可以這樣被運用

在 JSX 中執行 function

當然也可以在 JSX 中執行一個 funtion 並得到一個回傳的結果值：

function App() {
  const myCountry = {
    country: "Taiwan",
    city: " Taipei"
  };

  const formatCountry = ({country, city}) => {
    return country + city;
  }
  
  return (
    <div>
      <h1>Hello, {formatCountry(myCountry)} !</h1>
    </div>
  );
}

export default App;

JSX 中 判斷式 當然也是可行的

function App() {
  const myCountry = {
    country: "Taiwan",
    city: " Taipei"
  };

  const formatCountry = ({country, city}) => {
    return country + city;
  }

  // 可以這兩行其中一行註解掉
  const user = "Zhan"
  // const user = ""
  

  function getGreeting(user) {
    return user
      ? <p>{user} Hello, {formatCountry(myCountry)}!</p>
      : <p>Hello, World</p>;
  }
  
  const element = getGreeting(user);

  return (
    <div>
      {element}
    </div>
  );

}

export default App;

注意：
由於 JSX 比較接近 JavaScript 而不是 HTML，React DOM 使用 camelCase 來命名屬性而不是使用慣有的 HTML 屬性名稱。
舉例來說：在 JSX 之中，class 變成了 className，label 的 for 變成了htmlFor，而 tabindex 變成了 tabIndex。
因為 class 跟 for 在 JSX 中是 保留字

小結

今天介紹了 React 中要如何撰寫程式碼，那就是利用了 JSX 語法，雖然 React 是 JavaScript 的函式庫，所以基本的 JS 語法非常重要，但是若是沒有 JSX 這張通行證，可是無法在 React 的世界生存的喔！